import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { getHeaderData } from '../../actions/categoryAction'
import './Category.scss'


/**
 * @description  外卖类别
 * */

class Category extends PureComponent {
  constructor(props) {
    super(props);
    this.fetchData();
  }
  goCategory () {
    window.location.href = '/category.html'
  }
  fetchData () {
    this.props.dispatch(getHeaderData())
  }

  renderItems () {
    let items = this.props.items
    items = items.splice(0, 8)
    return items.map((item, index) => {
      return (
        <div key={index} className="category-item" onClick={() => this.goCategory()}>
          <img className="item-icon" src={item.url} />
          <p className="item-name">{item.name}</p>
        </div>
      )
    })
  }

  render () {
    return (
      <div className="category-content clearfix">
        {this.renderItems()}
      </div>
    );
  }
}


export default connect(
  (state) => ({
    items: state.category.items
  })
)(Category) 
